<style>
</style>
<template>
    <Modal v-model="settings.visibility" :width="settings.width">
        <p slot="header">
            <Icon type="information-circled"></Icon>
            <span>{{settings.title}}</span>
        </p>
        <div style="text-align:center">
            {{settings.content}}
        </div>
        <div slot="footer">
            <Button :type="settings.btnType" size="large" long :loading="settings.loading" @click="onDelete">
                {{settings.btnText}}
            </Button>
        </div>
    </Modal>
</template>
<script>
    export default {
        data() {
            return {
                settings: {
                    title: '删除确认',
                    content: '确认删除吗？',
                    btnText: '删除',
                    btnType: 'error',
                    width: 320,
                    title_color: '#f60',
                    loading: false,
                    visibility: false,
                    callback: null
                }
            }
        },
        methods: {
            show(settings) {
                this.$emit('on-show')
                Object.assign(this.settings, settings || {})
                this.settings.visibility = true
            },
            hide() {
                this.$emit('on-hide')
                this.settings.loading = false
                this.settings.visibility = false
            },
            onDelete() {
                this.settings.loading = true
                if (typeof(this.settings.callback) == 'function') {
                    this.settings.callback()
                }
            }
        }
    }
</script>
